<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/通用css样式.css">
    <link rel="stylesheet" href="./css/头部通用样式.css">
    <link rel="stylesheet" href="./css/底部通用样式.css">
    <link rel="stylesheet" href="./css/房源信息.css">
    <script src="./js/计算缩放.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SuAbrtK1Bu5V9XISRleW91vpdEVQ70IZ"></script>
</head>
<style type="text/css">
    html {
        height: 100%
    }
    
    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
    
    #container {
        height: 83%;
    }
</style>

<body>
    <!-- 头部通用样式 -->
    <header class="head">
        <div class="head_s"> <img src="./image/index/logo.jpg" alt=""></div>
        <div class="head_a">
            <a href="./我的.html"><img src="./image/index/my.jpg" alt=""></a>
            <a href=""><img src="./image/index/xiazai.jpg" alt=""></a>
        </div>

    </header>
    <!-- 北京租房>房源信息 -->

    <div class="home">
        <a href="./首页.html">
            <p>首页></p>
        </a>
        <a href="./北京租房.html">北京租房</a>

        <span>&nbsp;>&nbsp;房源信息</span>
    </div>

    <!-- 房源图片 -->
    <div class="im">
        <div class="share">分享</div>
    </div>

    <!-- 房源信息 -->
    <div class="message">
        <div class="attention">
            <h2>天鹅湾小区精装两居，满五唯一，业主换房急售</h2>
            <div class="attention_">
                <img src="./image/rentalList/xin.png" alt="">
                <div>关注</div>
            </div>
        </div>
        <!-- 租金、房型、面积 -->
        <div class="message_">
            <div>
                <div>租金</div>
                <div>2300/月</div>
            </div>

            <div>
                <div>房型</div>
                <div>2室1厅</div>
            </div>

            <div>
                <div>面积</div>
                <div>204平米</div>
            </div>
        </div>

        <!-- 楼层、朝向、装修 -->
        <div class="message_a">
            <div>
                <div>楼层：高楼/17层</div>
                <div>朝向：南北</div>
            </div>

            <div>
                <div>装修：精装</div>
                <div>供暖：集体供暖</div>
            </div>

            <div>
                <div>年代：2007年</div>
                <div>楼型：板楼</div>
            </div>
        </div>
    </div>


    <div class="big">
        <!-- 经纪人房评 -->
        <div class="broker">
            <h2>
                经纪人房评
                <img src="./image/rentalList/right.png" alt="">
            </h2>
            <p>地理位置:晶都国际处于酒仙桥中心地带，毗邻北京三大商圈，紧邻丽都商圈，隔四环与望京商圈相望，西南紧挨燕莎商圈，地理位置优越。周边配套:颐堤港商业中心，兆维大厦....</p>
        </div>

        <!-- 看房客户记录 -->
        <div class="record">
            <h2>
                看房客户记录
                <img src="./image/rentalList/right.png" alt="">
            </h2>
            <p>近一个月新增0位看房客户，共50位</p>
        </div>

        <!-- 位置及周边 -->
        <div class="location">
            <h2>位置及周边</h2>
            <div class="location_">
                <div>
                    <p>地址：[黄村]时代龙和</p>
                    <!-- <img src="./image/rentalList/map.png" alt=""> -->
                    <div id="container"></div>
                </div>

            </div>
        </div>

        <!-- 小区成交历史 -->
        <div class="history">
            <h2>
                小区成交历史
                <img src="./image/rentalList/right.png" alt="">
            </h2>
            <div>
                <p>
                    3 室 2厅， 146平米，
                    <span>5000元</span>

                </p>
                <p>
                    签约日期：2015-02-26
                </p>
            </div>
        </div>
    </div>

    <!-- 联系方式 -->
    <div class="phone">
        <div class="phone_">
            <img src="./image/rentalList/man.png" alt="">

        </div>
        <div class="zhang">
            <div>张三</div>
            <div>4001581855转0008</div>
        </div>
        <div class="phone_aa">
            <div class="phone_a">
                <img src="./image/rentalList/icon1.png" alt="">

            </div>
            <div>
                致电
            </div>
        </div>
        <div class="phone_aaa">
            <div class="phone_a">
                <img src="./image/rentalList/icon2.png" alt="">
            </div>
            <div>短信</div>
        </div>
    </div>
    <!-- 底部通用样式 -->
    <div class="base">
        <p class="base_">北京找房无忧网>首页</p>
        <div class="base_a">
            <div class="base_s">
                <img src="./image/index/apple.png" alt="">
                <div>
                    <p>iphone</p>
                    <p>客户端</p>
                </div>
            </div>
            <div class="base_s">
                <img src="./image/index/android.png" alt="">
                <div>
                    <p>iphone</p>
                    <p>客户端</p>
                </div>
            </div>
        </div>

        <div class="base_q">
            <p>北京找房无忧房地产经纪有限公司</p>
            <p>网络经营许可证 京ICP备20160812号-12</p>
        </div>
    </div>


    <script>
        // 创建地图实例
        var map = new BMapGL.Map("container");
        // 设置地图中心点，这里是天安门   34.80452,113.680779
        var point = new BMapGL.Point(113.680779, 34.80452);
        map.centerAndZoom(point, 15);

        // 通过js获取当前位置
        // navigator.geolocation.getCurrentPosition(function (p) {
        //     console.log(p)
        // })
    </script>
</body>

</html>